import * as THREE from 'three';
import '../../css/base.css'

let canvas = document.getElementById("canvas")
let renderer, scene, camera;
let orbitControls;
let moveX = 0, // 把鼠标屏幕上的横向偏移量，作为 旋转角度的基准
    moveY = 0, // 把鼠标在屏幕上的纵向偏移量 组委旋转角度的基准
    target = new THREE.Vector3(), // 相机看向的方向
    v = .2 // 速度
let startX, startY;

function initCSR() {
    camera = new THREE.PerspectiveCamera(74, window.innerWidth / window.innerHeight, 0.1, 1000)

    scene = new THREE.Scene()

    renderer = new THREE.WebGLRenderer({canvas, antialias: true, alpha: true});
    camera.updateProjectionMatrix();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight, false)
}

function initModel() {
    //前后上下左右
    let arrImg = [
        loadTexture(require('../../../static/images/vrLook/O1_f.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_b.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_u.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_d.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_l.webp')),
        loadTexture(require('../../../static/images/vrLook/O1_r.webp')),
    ]
    let geometry = new THREE.BoxGeometry(100, 100, 100);
    let material = new THREE.MultiMaterial(arrImg)
    let mesh = new THREE.Mesh(geometry, material)

    scene.add(mesh)
}

function initControls() {
    canvas.addEventListener('touchstart', start, false)
    canvas.addEventListener('touchmove', move, false)
    canvas.addEventListener('mousedown', ev => {
        start(ev)
        canvas.addEventListener('mousemove', move, false)
    }, false)
    canvas.addEventListener('mouseup', () => {
        canvas.removeEventListener('mousemove', move)
    }, false)
    canvas.addEventListener('mouseout', () => {
        canvas.removeEventListener('mousemove', move)
    }, false)
}

function start(e) {
    startX = e.pageX || e.touches[0].pageX
    startY = e.pageY || e.touches[0].pageY
}

function move(e) {
    const pageX = e.pageX || e.touches[0].pageX, pageY = e.pageY || e.touches[0].pageY
    moveX = moveX + (startX - pageX) * v
    moveY = moveY + (pageY - startY) * v
    if (moveY >= 90) {
        moveY = 90
    } else if (moveY <= -90) {
        moveY = -90
    }
    startX = pageX
    startY = pageY
}

function loadTexture(url) {
    let textureLoader = new THREE.TextureLoader();
    let texture = textureLoader.load(url)
    return new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true,
        side: THREE.DoubleSide
    })
}

function render() {
    if (orbitControls) orbitControls.update();
    target.setY(Math.sin(THREE.MathUtils.degToRad(moveY)))
    target.setZ(Math.sin(THREE.MathUtils.degToRad(moveX - 90)) * Math.cos(THREE.MathUtils.degToRad(moveY)))
    target.setX(Math.cos(THREE.MathUtils.degToRad(moveX - 90)) * Math.cos(THREE.MathUtils.degToRad(moveY)))
    camera.lookAt(target)
    renderer.render(scene, camera)
}

function animation() {
    requestAnimationFrame(animation)
    render()
}

(function () {
    initCSR()
    initModel()
    initControls()
    animation()
    window.addEventListener('resize', ev => {
        renderer.setPixelRatio(window.devicePixelRatio);
        camera.aspect = canvas.offsetWidth / canvas.offsetHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight, false)
    })
})()

